<template>
    <!-- 曲线图 -->
	<canvas 
		canvas-id="canvasLineA" 
		id="canvasLineA" 
		class="charts" 
		disable-scroll=true
		@touchstart="touchLineA"
		@touchmove="moveCandle" 
		@touchend="touchEndCandle"
	></canvas>
</template>

<script>

    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
	var canvaLineA = null;
    export default {
        props: {
            width: {
                type: Number
            },
            charts_data: {
                type: Object
            },
        },
        data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
        },
        watch: {
            width(val){
               this.cWidth = val; 
               this.getData();
            }
        },
        mounted() {
            _self = this;
			this.cWidth = this.width;
            this.cHeight = uni.upx2px(400);
            if(this.cWidth != 0) {
                this.getData();
            }
        },
        methods: {
			getData(){
                _self.showLineA("canvasLineA",this.charts_data);
			},
			showLineA(canvasId,chartData){
				canvaLineA = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{ show:false },             // 隐藏底部标识
					dataLabel:false,                   // 是否显示折点数字
					dataPointShape:false,              // 是否显示折点
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,  // x轴数据
					series: chartData.series,          // 数据列表
					animation: true,
					enableScroll: true,                //开启图表拖拽功能
					xAxis: {
						type:'grid',
						gridColor:'#ffffff',
						gridType:'dash',
						dashLength:8,
						rotateLabel: true,             // x轴文案倾斜
						itemCount: 5,                   //x轴单屏显示数据的数量，默认为5个
						scrollShow:true,               //新增是否显示滚动条，默认false
						scrollAlign:'left',            //滚动条初始位置
					},
					yAxis: {
						gridType:'solid',
						gridColor:'#E2E2E2',
						dashLength:8,
						splitNumber:5,
						min: chartData.y_data.min_num,    // y轴最小值
						max: chartData.y_data.max_num,    // y轴最大值
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							// type: 'straight'    // 折线图
							type: 'curve'          // 曲线图
						}
					}
				});
			},
			touchLineA(e) {
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			moveCandle(e) {
				canvaLineA.scroll(e);
			},
			touchEndCandle(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
    }
</script>

<style lang="scss" scoped>
	.charts {
		width: 100%;
		height: 400upx;
	}
</style>